<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何实现单行／多行文本溢出的省略（...）？</title>
<style type="text/css">
</style>
</head>
<body>
<pre>
/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
详细资料可以参考： <a href="https://zhuanlan.zhihu.com/p/30707916" rel="nofollow">《【CSS/JS】如何实现单行／多行文本溢出的省略》</a> <a href="https://juejin.im/entry/587f453e1b69e60058555a5f" rel="nofollow">《CSS 多行文本溢出省略显示》</a>
</pre>
<script type="text/javascript">
</script>
</body>
</html>